<script setup lang="ts">

import {useUserStore} from "@/common/user_store.ts";
import {ref} from "vue";
import type {CollapseModelValue} from "element-plus";

console.log(import.meta.env.VITE_API_URL) //
console.log(import.meta.env.DB_PASSWORD) // undefined

const store = useUserStore();

//action监听器
// name: action 名称
// store: store 实例，类似 `someStore`
// args: 传递给 action 的参数数组
// after: 在 action 返回或解决后的钩子
// onError: // action 抛出或拒绝的钩子
const unsubscribe=store.$onAction(({name, args, store, after, onError}) => {
  const startTime = Date.now()
  console.log(`start with name ${name}, args=${JSON.stringify(args)}`)
  after((res) => {
    loading.value = false
  });
})
// 手动删除监听器
// unsubscribe()
store.question();
const loading = ref(true);
const activeNames = ref(['0']);
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}

const answerList = ref([]);



</script>

<template>
  <el-card>
    <template #header>请求</template>
    <el-collapse>
      <el-collapse-item v-for="(item,idx) in store.list" :name="idx" v-model="activeNames[idx]">
        <template #title>
          <el-text class="mb-2" truncated>{{item.title}}</el-text>
        </template>
        <div>
          <template v-if="item.type==2">
            <el-checkbox-group v-model="answerList[idx]">
              <el-checkbox v-for="(opt,i) in item.options" :label="`${store.option(i)}、 ${opt} `" :value="i"
                           size="large"/>
            </el-checkbox-group>
          </template>
          <template v-if="item.type==1">
            <el-radio-group v-model="answerList[idx]">
              <el-radio v-for="(opt,i) in item.options" :value="i" :key="i" size="large">{{ store.option(i) }}、{{opt}}
              </el-radio>
            </el-radio-group>
          </template>
        </div>
        <div>
          正确答案：
          <template v-for="(opt,i) in item.answer">
            <el-text class="mx-1" type="primary">{{ store.option(i) }}</el-text>
          </template>
        </div>
      </el-collapse-item>
    </el-collapse>

    <div>{{ answerList }}</div>
  </el-card>

</template>

<style scoped>
.w-150px{width: 300px;}
</style>